import React, { useEffect, useState } from "react";
import style from "./style.module.scss";
import { login } from "../../../store/user/userSlice";
import { useAppDispatch, useAppSelector } from "../../../store/hooks";
import login_hand from "../../../assets/images/image/hdpi/login_hand_03.png";
import emailIcon from "../../../assets/images/icon/common resource/hdpi/login_icon_mail_n.png";
import lockIcon from "../../../assets/images/icon/common resource/hdpi/login_icon_lock_n.png";
import hideIcon from "../../../assets/images/icon/common resource/hdpi/login_icon_hide_password_n.png";
import weixinIcon from "../../../assets/images/icon/common resource/hdpi/common_icon_weixin_n.png";
import { useNavigate, useSearchParams } from "react-router-dom";
import showIcon from "../../../assets/images/icon/common resource/hdpi/login_icon_show_password.png";

// 登录的参数类型
interface loginRawState {
  email: string;
  pwd: string;
}

export const Index: React.FC = () => {
  //  判断用户是否登录依据
  const isLogin = useAppSelector((state) => state.user.isLogin);
  const [pwdIcon, setPwdIcon] = useState<string>(hideIcon);
  const [show, setShow] = useState<boolean>(false);
  const [type, setType] = useState<string>("password");
  const navigate = useNavigate();
  //  存放用户的邮箱和密码数据
  const [values, setValues] = useState<loginRawState>({
    // 1150142072@qq.com
    email: "906446244@qq.com",
    pwd: "123456",
  });

  const [searchParams] = useSearchParams();
  const from = searchParams.get("from");
  const dispatch = useAppDispatch();
  const onLogin = (values: loginRawState) => {
    dispatch(login(values));
  };

  const changeType = () => {
    if (!show) {
      setType("text");
      setPwdIcon(showIcon);
      setShow(true);
    } else {
      setType("password");
      setPwdIcon(hideIcon);
      setShow(false);
    }
  };

  const onkeydown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.keyCode === 13) {
      onLogin(values);
    }
  };

  useEffect(() => {
    if (isLogin) {
      if (from) {
        navigate(from, { replace: true });
      } else {
        navigate("/home", { replace: true });
      }
    }
  }, [isLogin]);

  return (
    <div className={style.login}>
      <img src={login_hand} alt="" className={style.hand} />
      <form className={style.content}>
        <div className={style.formItem_email}>
          <img src={emailIcon} alt="" className={style.emailIcon} />
          <input
            type="text"
            className={style.emailInp}
            placeholder="请输入邮箱"
            name="email"
            value={values.email}
            onChange={(e) =>
              setValues((values) => ({ ...values, email: e.target.value }))
            }
          />
        </div>
        <div className={style.formItem_password}>
          <img src={lockIcon} alt="" className={style.lockIcon} />
          <input
            type={type}
            className={style.pwdInp}
            placeholder="请输入密码"
            name="pwd"
            value={values.pwd}
            onChange={(e) =>
              setValues((values) => ({ ...values, pwd: e.target.value }))
            }
            onKeyDown={(e) => onkeydown(e)}
          />
          <img
            src={pwdIcon}
            alt=""
            className={style.hideIcon}
            onClick={() => changeType()}
          />
        </div>
        <button
          type="button"
          className={style.btn_login}
          onClick={() => onLogin(values)}
        >
          登录
        </button>
      </form>
      <div className={style.shadow_one}></div>
      <div className={style.shadow_two}></div>
      <div className={style.btn_link}>
        <span
          className={style.forgetPwd}
          onClick={() => navigate("/my/forget/password1")}
        >
          忘记密码
        </span>
        <span className={style.registerNow_wrapper}>
          暂无账号？
          <big
            className={style.registerNow}
            onClick={() => navigate("/register")}
          >
            立即注册
          </big>
        </span>
      </div>
      <div className={style.bottom}>
        <div className={style.otherLogin}>
          <span className={style.stroke_left}></span>
          <span className={style.text}>其他登录方式</span>
          <span className={style.stroke_right}></span>
        </div>
        <img src={weixinIcon} alt="" className={style.weixinIcon} />
      </div>
    </div>
  );
};

export default Index;
